<div *ngIf="result" class="mt-2">
    <div *ngIf="criteriaArray.length > 0" class="row flex-nowrap table-header-row">
        <div [ngClass]="{'col-md-3': filterTarget == targetType.Screening, 'col-md-9': filterTarget == targetType.Report}">
            <span>Selected Criteria</span>
        </div>
        <div *ngIf="filterTarget == targetType.Screening" class="col-md-5">
            <span>Selected Threshold</span>
        </div>
        <div *ngIf="filterTarget == targetType.Screening" class="col-md-2 text-center"title="Click on 'Display Results' to view updated data in this column">
            # of Companies
        </div>
        <div [ngClass]="{'col-md-2': filterTarget == targetType.Screening, 'col-md-3': filterTarget == targetType.Report}">
            &nbsp;
        </div>
    </div>

    <div *ngIf="criteriaArray.length <= 0" class="card shadow">
        <div class="card-body text-center">
            <h1 class="text-medium-grey"><i class="ti-panel"></i></h1>
            <p>No criteria has been added</p>
            <button *ngIf="filter && filter.isCurrentUserOwner == true" class="btn btn-transparent primary-dark" (click)="addCriteria()"><i class="ti-plus"></i> Add Criteria</button>
        </div>
    </div>

    <div *ngIf="criteriaArray.length > 0" class="card card-body shadow criteriaList">
        <div *ngFor="let criteria of criteriaArray" class="bg-light-grey p-2 mb-3 criteriaItem">
            <div class="row">
                <div [ngClass]="{'col-md-3': filterTarget == targetType.Screening, 'col-md-8': filterTarget == targetType.Report}">
                    <a *ngIf="allowEdit(criteria) == true" href="javascript:;" class="text-link" (click)="editCriteria(criteria.filterCriteriaId)">{{ criteria.name }}</a>
                    <span *ngIf="allowEdit(criteria) == false">{{ criteria.name }}</span>
                </div>
                <div *ngIf="filterTarget == targetType.Screening" class="col-md-5">
                    {{ criteria.selectedValueInformation }}
                </div>
                <div *ngIf="filterTarget == targetType.Screening" class="col-md-2 text-center">
                    {{ criteria.companiesCount }}
                </div>
                <div class="col text-right">
                    <div *ngIf="filter.isCurrentUserOwner && filter.type != filterType.Standard">
                        <button *ngIf="filterTarget == targetType.Report" (click)="deleteCriteriaByGroup(criteria.filterCriteriaId, criteria.filterCriteriaGroupId)" class="btn btn-sm btn-transparent px-3 mr-1">Delete group</button>
                        <button (click)="deleteCriteriaById(criteria.filterCriteriaId)" class="btn btn-sm btn-transparent px-3">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>